$container: 1200px;
.container {
    width: $container;
    margin: auto;
}

.h_nav {
    height: 33px;
    background: #fff;
    border-bottom: 1px solid #F0F0F0;
    .h_content {
        float: right;
        line-height: 33px;
        color: #999;
        a {
            display: inline-block;
            color: #999;
        }
        .h_about {
            display: inline-block;
            cursor: pointer;
            margin-right: 10px;
            .icon_down {
                display: inline-block;
                margin-left: 6px;
                width: 6px;
                height: 6px;
                background: url(https://s10.mogucdn.com/mlcdn/c45406/181205_8eg8ea1a3k85c16ai1hl4735kalkf_16x10.png) no-repeat;
                background-size: 100%;
            }
        }
    }
}

.h_nav .h_content .nav_item:not(:first-child):before {
    content: "|";
    margin: 0 20px;
    font-weight: 300;
}

.h_con {
    width: 100%;
    position: relative;
    background-color: #fff;
}

// 头部logo区域样式
#top_logo {
    width: 130px;
    height: 100px;
    img {
        height: 100%;
    }
}

// 头部目录区域样式
.h_category {
    line-height: 100px;
    color: #333;
    margin-left: 30px;
    font-size: 15px;
    i {
        display: inline-block;
        width: 18px;
        height: 12px;
        background: url(../img/h_category.png) no-repeat;
        background-size: cover;
        margin-right: 2px;
    }
}

.search_content {
    margin-left: 30px;
}

// 头部主体搜索框样式
.h_search {
    width: 552px;
    height: 48px;
    margin-top: 28px;
    // background-color: yellow;
    .top_nav_form {
        width: 100%;
        border-radius: 6px;
        background-color: #f5f5f5;
        overflow: hidden;
        .sc_text {
            width: 462px;
            height: 48px;
            line-height: 48px;
            border: none;
            font-size: 14px;
            background: #f7f7f7;
            color: #666;
            padding: 0 15px;
            box-sizing: content-box;
            margin: 0 !important;
            text-align: left;
        }
        .sc_btn {
            width: 58px;
            height: 48px;
            border: none;
            cursor: pointer;
            border-radius: 0 5px 5px 0;
            background: url(../img/h_form_search.png) no-repeat;
            background-size: 100%;
            margin: 0 !important;
        }
    }
}

// 头部主体导航信息样式
.h_news {
    width: 150px;
    margin-top: 30px;
    margin-left: 25px;
    .top_news {
        display: flex;
        height: 48px;
        .news,
        .collection,
        .buycar {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            i {
                width: 24px;
                height: 24px;
            }
        }
        .news i {
            background: url(../img/top-news.png) no-repeat;
            background-size: contain;
        }
        .collection i {
            background: url(../img/top-collection.png) no-repeat;
            background-size: contain;
        }
        .buycar i {
            background: url(../img/top-buycar.png) no-repeat;
            background-size: contain;
        }
        .collection,
        .buycar {
            margin-left: 28px;
        }
    }
}

// 登录注册以及用户信息和退出
.h_inform {
    display: flex;
    justify-content: space-around;
    height: 48px;
    line-height: 48px;
    margin-top: 26px;
    font-size: 16px;
    a {
        display: inline-block;
        margin-left: 25px;
        vertical-align: middle;
        color: #ffc0cc;
        img {
            width: 40px;
            height: 40px;
        }
        &:hover {
            color: #64E;
        }
    }
    .backlogin {
        margin-left: 9px;
    }
    span {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        line-height: 0;
        width: 105px;
        height: 48px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-left: 20px;
        font-size: 14px;
        color: #905;
        vertical-align: middle;
        i {
            text-decoration: underline;
            cursor: pointer;
            font-weight: 700;
        }
    }
}